<template>
  <div>
    <h1>语音识别</h1>
    <div class="row">
      <div class="col-md-4">
        <AudioRecorder upload-url="some url" filename="ninja" format="wav" :attempts="3" :time="2" :headers="headers"
          :before-recording="callback" :pause-recording="callback" :after-recording="callback" :select-record="callback"
          :before-upload="callback" :successful-upload="callback" :failed-upload="callback" :bit-rate="192" />
      </div>
      <div class="col-md-6">
        <table class="table table-hover">
          <thead>
            <tr>
              <th>序号</th>
              <!-- <th>文件名</th> -->
              <th>语音</th>
              <th>翻译内容</th>
              <th>用户操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item, idx) in audio_list" :key="item.url">
              <td>{{ idx + 1 }}</td>
              <!-- <td>{{ item.filename }}</td> -->
              <!-- <td>{{item.audio}}</td> -->
              <!-- <td><a href="{{item.audio}}">下载</a></td> -->
              <td>
                <audio controls>
                  <!-- <source src="horse.ogg" type="audio/ogg"> -->
                  <source :src="item.audio" type="audio/mpeg">
                </audio>
              </td>
              <td>{{ item.content }}</td>
              <td>
                <button @click="deleteRow(item)" :data-idx="idx" class="btn btn-danger" style="margin: 0% 10%;">
                  <i class="glyphicon glyphicon-remove"></i>
                </button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

    <router-view></router-view>
  </div>

</template>

<script>
import axios from 'axios'
import { onMounted, reactive, toRefs } from 'vue'
import AudioPlayer from '../components/AudioPlayer.vue'
import AudioRecorder from '../components/AudioRecorder.vue'
import DownLoader from '../components/DownLoader.vue'
import emitter from '@/router/bus'
import httptool from '@/router/http'

export default {
  name: 'AudioRecognition',
  components: {
    AudioPlayer,
    AudioRecorder,
    DownLoader
  },
  data() {
    return {
      mp3: '/assets/example.mp3',
    }
  },
  methods: {
    callback(msg) {
      console.debug('Event: ', msg)
    },
  },
  setup() {
    let base_url = "http://10.82.14.162:8000/audio/"
    const audio_blank = { url: '', filename: '', audio: '', content: '', }
    const state = reactive({
      audio_list: [],
      audio: Object.assign({}, audio_blank)
    })

    const getAudioList = () => {
      axios.get(base_url).then(res => {
        state.audio_list = res.data;
        state.audio = Object.assign({}, audio_blank)
      }).catch(err => {
        console.log(err);
      })
    }

    const deleteRow = (item) => {
      axios.delete(item.url).then(() => {
        getAudioList();
      }).catch(err => {
        console.log(err);
      })
    }

    onMounted(() => {
      getAudioList();
      emitter.on('end-upload', (msg) => {
        getAudioList();
        console.log('msg: ', msg.response)
      })
    })
    return {
      ...toRefs(state),
      deleteRow,
    }
  },
}
</script>

<!-- <style scoped lang="scss">
.home{
  width: 100vw;
  height: 100vh;
  // background-color: #2e21c5;
  color: white;
  .header{
    height: 50px;
  };
  .main{
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
    .left{
      width: 27%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .leftUp{
        height: 58%;
        border: 1px solid green;
      }
      .leftDown{
        height: 38%;
        border: 1px solid green;
      }
    }
    .center{
      width: 43%;
    }
    .right{
      width: 27%;
    }
  }
}
</style>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

<style lang="scss">
  .toggle {
    cursor: pointer;
    margin: 20px;
  }
</style> -->